<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="1200px"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    append-to-body
  >
    <div class="common-container">
      <div class="header">
        <div class="header_left"></div>
        <div class="header_right">
          <el-button
            size="small"
            class="el_button"
            icon="el-icon-plus"
            @click="addClick"
            v-permission="{ action: 'host:command:add' }"
            >新增</el-button
          >
        </div>
      </div>
      <div class="content" style="height: 420px">
        <el-table
          :data="showList"
          height="calc(100% - 30px)"
          class="table"
          ref="refTable"
          row-key="id"
          :header-cell-style="headerStyle"
          :key="tableKey"
          :span-method="objectSpanMethod"
        >
          <!-- <el-table-column align="center" label="序号" type="index" width="50">
          </el-table-column> -->
          <el-table-column
            align="center"
            prop="groupNo"
            label="分组编号"
            min-width="100"
            show-overflow-tooltip
            v-if="dishInfo.layoutType != 1"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="addressMapping"
            label="地址映射"
            min-width="150"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="keyName"
            label="指令名称"
            min-width="140"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="commandInfo"
            label="指令值"
            min-width="180"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="status"
            label="配置"
            min-width="80"
          >
            <template slot-scope="scope">
              <el-tag type="success" size="mini" v-if="scope.row.status == 1"
                >是</el-tag
              >
              <el-tag
                type="danger"
                size="mini"
                v-else-if="scope.row.status == 2"
                >否</el-tag
              >
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="status"
            label="状态"
            min-width="80"
          >
            <template slot-scope="scope">
              <el-tag type="success" size="mini" v-if="scope.row.status == 1"
                >启用</el-tag
              >
              <el-tag
                type="danger"
                size="mini"
                v-else-if="scope.row.status == 0"
                >停用</el-tag
              >
              <span v-else>-</span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="detectorTypeName"
            label="探测器型号"
            min-width="140"
            show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="createTime"
            label="创建时间"
            show-overflow-tooltip
            min-width="160"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="management"
            label="操作"
            width="110"
            fixed="right"
          >
            <template slot-scope="{ row }">
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="bottom"
                v-permission="{ action: 'host:command:edit' }"
              >
                <i
                  @click="editClick(row)"
                  class="iconfont tianxie tableBtnIcon"
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="bottom"
                v-permission="{ action: 'host:command:delete' }"
              >
                <i
                  @click="delClick(row)"
                  class="iconfont shanchu tableBtnIcon"
                ></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="total"
          @pagination="getDataList"
          class="pagination"
          layout="total"
        >
        </pagination>
      </div>

      <Edit
        ref="refEdit"
        :itemInfo="itemInfo"
        :deviceInfo="deviceInfo"
        @update="onUpdate"
      />
    </div>
  </el-dialog>
</template>

<script>
import { reqKeyCommandList, reqKeyCommandDelete } from "@api/api.js";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";

import Edit from "./Config.vue";
import { mapState } from "vuex";

export default {
  name: "",
  props: ["deviceInfo", "dishInfo"],
  components: {
    Pagination,
    Edit,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      dialogVisible: false,
      title: "配置",

      total: 0,
      dataList: [],
      showList: [],
      tableKey: 0, //更新渲染表格

      searchForm: {
        detectorName: "",
      },
      loadingSearch: false,

      itemInfo: {}, //编辑信息
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {
    dialogVisible(e) {
      if (e) {
      }
    },
    "dishInfo.dataList"(e) {
      // console.log("dishInfo列表dataList", this.dishInfo);
      this.setTitle();
      const { dataList } = this.dishInfo;
      this.dataList = dataList ?? [];
      this.showList = this.dataList;
      this.total = this.dataList.length;
    },
  },
  mounted() {},
  methods: {
    // 标题设置
    setTitle() {
      const { layoutType, panelNo } = this.dishInfo;
      let layout =
        layoutType == 1 ? "基本面板" : layoutType == 2 ? "多线盘" : "总线盘";
      let pannel = layoutType != 1 ? "-" + panelNo + "号盘" : "";
      this.title = `${layout}${pannel}`;
    },
    // 获取列表
    async getDataList() {
      const res = await reqKeyCommandList({
        deviceCode: this.deviceInfo.imei || this.deviceInfo.deviceCode,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.dataList = res.data.list;
      this.total = res.data.list.length || 0;
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.dishInfo.layoutType == 1) return;
      if (columnIndex === 0) {
        const currentGroupNo = row.groupNo;
        const groupRows = this.showList.filter(
          (item) => item.groupNo === currentGroupNo
        );
        if (
          rowIndex ===
          this.showList.findIndex((item) => item.groupNo === currentGroupNo)
        ) {
          return {
            rowspan: groupRows.length, // 合并的行数等于当前 groupNo 的行数
            colspan: 1,
          };
        } else {
          // 其他行不显示
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },

    // 查询
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      this.loadingSearch = true;
      await this.getDataList();
      this.loadingSearch = false;
      this.clearSelections();
    },

    clearDetectorName() {
      this.getInitDataList();
    },
    // 新增
    addClick() {
      this.itemInfo = {
        layoutType: this.dishInfo.layoutType,
        panelNo: this.dishInfo.panelNo,
      };
      this.$refs.refEdit.dialogVisible = true;
    },

    // 编辑
    editClick(row) {
      let itemInfo = {};
      itemInfo = JSON.parse(JSON.stringify(row));
      this.itemInfo = itemInfo;
      this.$refs.refEdit.dialogVisible = true;
    },

    updateList() {
      this.showList = this.dataList;
      this.total = this.dataList.length || 0;
      this.tableKey++;
    },

    // 更新
    onUpdate(info) {
      this.$emit("updateConfigList");
      // const index = this.dataList.findIndex((item) => item.id === info.id);
      // if (index !== -1) {
      //   this.dataList[index] = info;
      // } else {
      //   this.$emit("updateConfigList");
      // }
      // this.updateList();
    },

    // 删除
    async delClick(row) {
      const result = await this.$confirm(
        `此操作将删除指令：${row.keyName}, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      const res = await reqKeyCommandDelete(row.id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("删除成功");
      // const { dataList } = this;
      this.$emit("updateConfigList");
      // this.dataList.splice(
      //   this.dataList.findIndex((item) => item.id === row.id),
      //   1
      // );
      // this.showList = this.dataList;
      // this.total = this.dataList.length || 0;
    },
    // 点击关闭弹框
    closeDialog() {
      this.dialogVisible = false;
      // this.$emit("updateConfigList");
    },
  },
  created() {},
};
</script>

<style scoped lang="less">
@import url("../../../../../views/common.less");
@import url("~@views/style/tablePage.less");

.common-container {
  // min-height: 500px;
  // padding: 0 10px !important;
}

::v-deep .el_button.el-button--small {
  background: #7367f0;
  color: #fff;
  border: none;
}

// 高级搜索
::v-deep .el-button--primary {
  background-color: #7367f0;
  border: 1px solid #7367f0;
  color: #fff;
}

::v-deep .popover_from .el-form-item__label {
  color: @primaryThemeTxtColor2;
  padding: 0px;
}

::v-deep .el-input__inner {
  color: var(--primaryContentTxt, #f1f1f1) !important;
}

::v-deep .el-button--small {
  border: none;
}

// 下拉框加载开始
.div_box {
  height: 276px;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  z-index: 9999;
}

/* 定义滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  display: block; //显示滚动条
  width: 0px; //定义滚动条宽度
  height: 10px; //定义滚动条高度
  border-radius: 10px; //定义滚动条圆角
}

/*定义滚动条轨道 内阴影+圆角*/
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5); //定义轨道阴影
  border-radius: 10px; //定义轨道圆角
  background-color: transparent; //定义轨道颜色
}

/*定义滑块 内阴影+圆角*/
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px; //定义滑块圆角
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5); //定义滑块阴影
  background-color: @primaryBgcolor12; //定义滑块颜色
}

// 解决el-table固定列滚动错位问题
::v-deep
  .el-table
  .el-table__fixed-right
  .el-table__fixed-body-wrapper
  .el-table__body {
  padding-bottom: 10px !important;
}

// 解决el-table固定列挡住滚动条问题
::v-deep .el-table__fixed-right {
  height: auto !important;
  bottom: 10px !important; // 这个得自己调试看多少合适
}

// 去掉固定列下方的横线， 样式优化
::v-deep .el-table__fixed-right::before {
  display: none !important;
}

// 解决element-ui 中 table 鼠标悬停时高亮背景颜色的修改，添加fixed后颜色又出现问题  ,鼠标滑过td上作用的样式
::v-deep .el-table tbody tr:hover > td {
  background-color: transparent !important;
}

// 解决element-ui 中 table 鼠标悬停时高亮背景颜色的修改，添加fixed后颜色又出现问题
::v-deep .el-table__body .el-table__row.hover-row td {
  background-color: transparent !important;
}

//右边固定
// 解决element-ui 中 table 鼠标悬停时高亮背景颜色的修改，添加fixed后颜色又出现问题
::v-deep .el-table__fixed-right tbody tr:hover > td {
  background-color: transparent !important;
}
</style>
